<template>
  <div class="coupon_details">
    <el-container class="base_details_container">
      <BackTitleView :title="title" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">基本信息</div>
            <div class="base_details_content_second">
              <el-form
                ref="basicFormRef"
                :disabled="readOnly"
                :model="couponForm"
                :rules="couponRules"
                label-width="100px"
                class="base_details_form"
              >
                <el-form-item label="优惠券名称" prop="name">
                  <el-input v-model="couponForm.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="有效期" prop="date">
                  <div class="base_details_date_picker">
                    <el-date-picker
                      v-model="couponForm.date"
                      type="daterange"
                      range-separator="~"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="YYYY-MM-DD 00:00:00"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="适用品类" prop="limitBusiType">
                  <el-radio-group v-model="couponForm.limitBusiType">
                    <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.value">{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div class="base_details_title">优惠设置</div>
            <div class="base_details_content_second">
              <el-form
                ref="discountsFormRef"
                :model="couponForm"
                :disabled="readOnly"
                :rules="couponRules"
                label-width="100px"
                class="base_details_form"
              >
                <el-form-item label="优惠形式" prop="moneyType">
                  <el-radio-group v-model="couponForm.moneyType">
                    <el-radio
                      v-for="(item, index) in moneyTypeOptions"
                      :key="index"
                      :label="item.value"
                      >{{ item.label }}</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  v-if="couponForm.moneyType === '1010001'"
                  label="优惠内容"
                  prop="moneyOff"
                >
                  <div class="money_box">
                    <span>满</span>
                    <el-input
                      v-model="couponForm.moneyOff.limitMoney"
                      placeholder="请输入"
                    />
                    <span>元，减</span>
                    <el-input
                      v-model="couponForm.moneyOff.money"
                      placeholder="请输入"
                    />
                    <span>元</span>
                  </div>
                </el-form-item>
                <el-form-item v-else label="优惠内容" prop="discountMoney">
                  <div class="money_box">
                    <el-input
                      v-model="couponForm.discountMoney"
                      placeholder="例如：9.8"
                    />
                    <span>折</span>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="route.go(-1)">取消</el-button>
        <el-button @click="check" type="primary" v-if="!readOnly"
          >保存</el-button
        >
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import { ref, reactive } from "vue";
import { $msg } from "@ui/msg";
import $ from "@util/base";
import api from "@api/coupon";
import useRoute from "@util/router";

const route = useRoute();
const urlQuery = route.query();
var readOnly = false;
var title = "优惠券详情";
$.handleCRU(urlQuery.type, {
  show: () => {
    readOnly = true;
    title = "优惠券详情";
    getData();
  },
  add: () => {
    title = "新增优惠券";
  },
});

const otherUnit = ref();
const unitOptions = ["个", "份", "箱", "其他"];
const moneyTypeOptions = [
  {
    label: "满减",
    value: "1010001",
  },
  {
    label: "折扣",
    value: "1010002",
  },
];
const typeOptions = [
  {
    label: "通用",
    value: "1003004",
  },
  {
    label: "商品",
    value: "1003001",
  },
  {
    label: "旅行",
    value: "1003002",
  },
  {
    label: "酒店",
    value: "1003003",
  },
];

const basicFormRef = ref(null);
const discountsFormRef = ref(null);

const couponForm = ref({
  name: null,
  date: [],
  limitBusiType: null,
  moneyType: "1010001",
  moneyOff: {
    limitMoney: null,
    money: null,
  },
  discountMoney: null,
});

const checkMoneyOff = (rule, value, callback) => {
  if (
    $.isNull(couponForm.value.moneyOff.limitMoney) ||
    $.isNull(couponForm.value.moneyOff.money)
  ) {
    callback(new Error("请输入优惠内容"));
  }
  return true;
};

const couponRules = {
  name: [
    {
      required: true,
      message: "请输入优惠券名称",
      trigger: "blur",
    },
  ],
  date: [
    {
      required: true,
      type: "array",
      message: "请选择有效期",
      trigger: "change",
    },
  ],
  limitBusiType: [
    {
      required: true,
      message: "请选择适用品类",
      trigger: "change",
    },
  ],
  moneyType: [
    {
      required: true,
      message: "请选择优惠形式",
      trigger: "change",
    },
  ],
  moneyOff: [
    {
      required: true,
      validator: checkMoneyOff,
      trigger: "blur",
    },
  ],
  discountMoney: [
    {
      required: true,
      message: "请输入优惠内容",
      trigger: "blur",
    },
  ],
};

function check() {
  let check = [false, false];
  let p1 = basicFormRef.value.validate((valid) => {
    if (valid) {
      check[0] = true;
    } else {
      check[0] = false;
    }
  });
  let p2 = discountsFormRef.value.validate((valid) => {
    if (valid) {
      check[1] = true;
    } else {
      check[1] = false;
    }
  });
  Promise.all([p1, p2]).then(() => {
    if (check.every(function (e) {
      return e;
    })) {
      save()
    }
  })
}


function save() {
  api.add(couponForm.value, () => {
    $msg.succ("新增成功");
    route.go(-1)
  })
}

function getData() {
  api.details(urlQuery.code, (val) => {
    couponForm.value = val
  });
}
</script>

<style lang="scss" scoped>
.coupon_details {
  height: 100%;
  .money_box {
    span {
      margin: 0 10px;
      &:nth-child(1) {
        margin-left: 0;
      }
    }
    .el-input {
      width: 120px !important;
    }
  }
}
</style>
